<style lang='less' >
	@import '~style/table.less';

.noticeManage{
 .el-table{
		.el-dialog__header{
				padding: 10px;
				background-color: #eee;
				color: #222;
		}
		.el-form-item__label{
			color: #333;
			font-weight: bold;
		}
		.el-table__body-wrapper{
			.el-table__row{
				td:nth-child(2){
					/*标题超过不换行，省略*/
					text-overflow: ellipsis;
					overflow: hidden;
					white-space:nowrap !important;
				}
			}
		}
		.cell{
			/*标题超过不换行，要先干掉默认的样式*/
			white-space: inherit;
		}
	}
	.el-dialog__body{
		padding: 5% 20% ;
		
	}
	.el-dialog__footer{
		text-align: center;
		padding-bottom: 25px;
		.dialog-footer{	
			.el-button{
				width: 8rem;
				margin-right: 1rem;
				&:last-child{
					margin-right: 0;
				}
			}
		}
	}
	.colorRed{
		color: red;
	}
	.colorGreen{
		color: green;
	}
}
  
</style>

<template>
  <div class="noticeManage">
		<div class="dataBox" >
				<el-table
					v-loading="formLoading" 
					:data="formData"
					height="500"
					style="width: 100%"
					:default-sort = "{prop: 'id', order: 'descending'}">
					<el-table-column
							prop='id'
							sortable
							label="序号"
							width='100'>
					</el-table-column>

					<el-table-column
							prop="title"
							label="标题"
							width='250'>
					</el-table-column>

					<el-table-column
							prop="terminal"
							label="使用终端"
							width='150'>
					</el-table-column>

					<el-table-column
							prop="author"
							label="录入者"
							width='130'>
					</el-table-column>

					<el-table-column
							prop="status"
							label="状态"
							:formatter='getStatus'
							width='160'>
					</el-table-column>

					<el-table-column
							prop="dateCreated"
							label="创建时间"
							width='170'>
					</el-table-column>

					<el-table-column
							prop="lastUpdated"
							label="发布时间"
							width='170'>
					</el-table-column>
				
				<el-table-column label="操作" min-width='170'>
						<template scope="scope">
								<btns-box
										:scope='scope'
										:btnConfig='getButtonConfig'
										v-on:showPublishBox='showPublishBox'
										v-on:reloadPage='reloadPage'
								></btns-box>
						</template>

				</el-table-column>
				</el-table>
		</div>

		<div class="paginationBox">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:page-sizes="[10, 20, 30, 50]"
				layout="total, sizes, prev, pager, next, jumper"
				:current-page.sync="currentPage"
				:page-size="pageSize"
				:total='totalSize'>
			</el-pagination>
		</div>

    <el-dialog
			title="推送"
			:visible.sync="dialogVisible"
			:close-on-click-modal='false'
			:before-close='initDialog'
			size="tiny">
			<el-form :label-position='"right"' label-width="80px" :model="publishFormData">
				<el-form-item label="标题">
					{{publishFormData.title}}
				</el-form-item>

				<el-form-item label="推送终端">
					<el-checkbox-group v-model="publish" >
						<el-checkbox :disabled='hctDisabled' label="华财通" ></el-checkbox>
						<el-checkbox :disabled='lcsDisabled' label="理财师" ></el-checkbox>
					</el-checkbox-group>
				</el-form-item>

				<el-form-item label="推送结果">
					<span v-if='publishFormData && !publishFormData.pushHuaCaiTongResult && !publishFormData.pushLiCaiShiResult'>未推送</span>
					<span v-if='publishFormData && publishFormData.pushHuaCaiTongResult && publishFormData.pushHuaCaiTongResult.trim() =="华财通推送失败"' class="colorRed">华财通推送失败</span>
					<span v-if='publishFormData && publishFormData.pushHuaCaiTongResult && publishFormData.pushHuaCaiTongResult.trim() =="华财通推送成功"' class="colorGreen">华财通推送成功</span>
					<span v-if='publishFormData && publishFormData.pushHuaCaiTongResult && publishFormData.pushLiCaiShiResult'> / </span>
					<span v-if='publishFormData && publishFormData.pushLiCaiShiResult && publishFormData.pushLiCaiShiResult.trim() =="理财师推送失败"' class="colorRed">理财师推送失败</span>
					<span v-if='publishFormData && publishFormData.pushLiCaiShiResult && publishFormData.pushLiCaiShiResult.trim() =="理财师推送成功"' class="colorGreen">理财师推送成功</span>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
					<el-button @click="initDialog">取消</el-button>
					<el-button type="primary" :loading="isPublish" @click='postPublishNotice'>推送</el-button>
			</span>
    </el-dialog>

  </div>
</template>

<script>
	import btnsBox from './tableBoxBtn.vue'
	import {status} from '../config.js'
	import {postPublishNotice} from 'api/noticeManage/index.js'
	export default {
		props:{
			formLoading:{
				type:Boolean,
				required:true,
			},
			getButtonConfig:{
				type:Object,
			},
			formData:{
				type:Array,
				default:[]
			},
			totalSize:{
				type:Number,
				default:0,
			},
		},
		components:{
			btnsBox,
		},
		computed:{
			hctDisabled(){
				let result = this.publishFormData && (this.publishFormData.pushHuaCaiTongResult && this.publishFormData.pushHuaCaiTongResult.trim() =="华财通推送成功") || (this.publishFormData.toHuaCaiTong && this.publishFormData.toHuaCaiTong == 'NO')
				return result
			},
			lcsDisabled(){
				let result = this.publishFormData && (this.publishFormData.pushLiCaiShiResult && this.publishFormData.pushLiCaiShiResult.trim() =="理财师推送成功") || (this.publishFormData.toHuaCaiTong && this.publishFormData.toLiCaiShi == 'NO')
				return result
			},
		},
		data(){
			return{
				dialogVisible:false,
				status:status,//
				currentPage:1,//当前页
				pageSize:10,//每页显示的条数
				publish:[],//推送终端
				publishFormData:{
					uuid:'',
					pushHuaCaiTong:'NO',
					pushLiCaiShi:'NO',
				},
				isPublish:false,
			}
		},
		methods:{
				handleSizeChange(val) {
					// console.log(`每页 ${val} 条`);
					this.pageSize = val;
					this.currentPage = 1;
					this.setTableParams()
				},
				handleCurrentChange(val) {
					// console.log(`当前页: ${val}`);
					this.currentPage = val;
					this.setTableParams()
				},
				setTableParams(){
					let obj = {
						curPage:this.currentPage-1,
						pageSize:this.pageSize,
					}
					this.$emit('setTableParams', obj)
				},
				getStatus(row, column){
					return this.status[row.status]
				},
				showPublishBox(obj){
					// console.log('showPublishBox', obj);
					this.publishFormData = obj;
					this.dialogVisible = true;
				},
				async postPublishNotice(){
					try{
						if(this.isPublish )return;

						if(this.hctDisabled && this.lcsDisabled){
						// 如果两个按钮都不能按，直接返回
							return
						}

						if(this.publish.length == 0){
							this.$alert('请选择要推送的终端')
							return
						}
						this.isPublish = true;
						let params ={
							uuid:this.publishFormData.uuid,
							pushHuaCaiTong:this.publish.includes('华财通') ? 'YES' :'NO', 
							pushLiCaiShi:this.publish.includes('理财师') ? 'YES' :'NO',
							author:sessionStorage.getItem('realName')?sessionStorage.getItem('realName'):sessionStorage.getItem('USER_NAME'),
						}
						// console.warn(params)
						let back = await postPublishNotice(params)
						back = back.data
						console.log('postPublishNotice', back)
						this.isPublish = false;
						let pushFail = back && (back.resultCode !='200' || (back.result && back.result.result && back.result.result.includes('失败')))
						this.$message({
							message: back.msg == '成功' ?  back.result.result : back.msg,
							type: pushFail ? 'error':'success',
						});
						// 清空推送选项！
						this.publish =[];
						
						this.publishFormData.pushLiCaiShiResult = back && back.result && back.result.pushLiCaiShiResult ? back.result.pushLiCaiShiResult :this.publishFormData.pushLiCaiShiResult;
						this.publishFormData.pushHuaCaiTongResult = back && back.result && back.result.pushHuaCaiTongResult ? back.result.pushHuaCaiTongResult :this.publishFormData.pushHuaCaiTongResult;

						if(!pushFail){
							this.$emit('reloadPage')
						}
						
					}catch(err){
						this.isPublish = false;
						console.error(err)
					}
				},
				initDialog(done){//初始化弹出框的值
					// console.log('initDialog')
					this.publishFormData.pushHuaCaiTong = 'NO';
					this.publishFormData.pushLiCaiShi = 'NO';
					this.publish=[]
					this.dialogVisible = false;
				},
				reloadPage(){
					this.$emit('reloadPage')
				},
		},
		created(){
			this.setTableParams()
		},
		mounted(){

		},
  }
</script>